<template>
	<view>
		<u-navbar :is-back="false" title="酷疆" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground"></u-navbar>
		<view class="main">
			<scroll-view :show-scrollbar="true" scroll-y scroll-with-animation @scrolltolower="getLoadMore">
				<!-- 搜索栏 -->
				<view class="search">
					<view class="input" @tap="handleNavigateTo('./search/search')"><u-search placeholder="请输入搜索内容" disabled :show-action="false"></u-search></view>
					<view class="clock" @tap="handleNavigateTo('./clock/clock')">
						<u-image width="45" height="40" :src="require('../../static/image/qiandao.png')"></u-image>
						<text>签到</text>
					</view>
					<view class="web" @tap="showPopup = true">
						<u-image width="50" height="42" :src="require('../../static/image/weixin.png')"></u-image>
						<text>公众号</text>
					</view>
				</view>
				<!-- banner -->
				<view class="swiper"><u-swiper height="320" :list="bannerList" border-radius="0" :effect3d="false" mode="dot" @click="handleBanner"></u-swiper></view>
				<!-- tabs -->
				<view class="tabs">
					<!-- #ifdef MP-WEIXIN -->
					<u-sticky :enable="enable" offset-top="128">
						<u-tabs-swiper ref="uTabs" :list="hasStatus ? tabsList : tabList" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</u-sticky>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<u-sticky :enable="enable" offset-top="88">
						<u-tabs-swiper ref="uTabs" :list="hasStatus ? tabsList : tabList" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</u-sticky>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-sticky :enable="enable">
						<u-tabs-swiper ref="uTabs" :list="hasStatus ? tabsList : tabList" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</u-sticky>
					<!-- #endif -->
					<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{ height: swiperHeight + 'px' }">
						<swiper-item v-if="hasStatus">
							<view class="swiper-item swiper-item-left">
								<u-tabs-swiper gutter="60" :current="secondCurrent" :show-bar="false" :list="secondTabsList" @change="secondTabsChange" :is-scroll="true"></u-tabs-swiper>
								<view class="list" v-if="videoList.length !== 0">
									<view class="item" v-for="(item, index) in videoList" :key="index" @tap="handleToLive(item)">
										<text class="item-status status-notice" v-show="item.status == -1">预告</text>
										<text class="item-status status-live" v-show="item.status == 1 || item.status == 2">直播</text>
										<text class="item-status status-replay" v-show="item.status == 0">回放</text>
										<u-image width="100%" height="200" :src="item.banner"></u-image>
										<view class="item-info">
											<text class="item-title">{{ item.title }}</text>
											<text class="item-time">{{ item.start_time.slice(0, 16) }}</text>
											<view class="item-pv">
												<u-image width="35" height="35" :src="require('../../static/image/pv.png')"></u-image>
												<text>{{ item.pv }}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="else" v-else><text>暂无相关直播</text></view>
								<u-loadmore :load-text="loadText" :status="status" v-show="videoList.length !== 0" />
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item swiper-item-center">
								<view class="channel" v-for="(item, index) in channelList" :key="index" @tap="handleChannelDetail(item.cid)">
									<u-image width="45vw" height="200" :src="item.banner"></u-image>
									<view class="channel-right">
										<view class="more">
											<text>{{ item.title }}</text>
											<u-icon name="arrow-right"></u-icon>
										</view>
										<text>{{ `已更新${item.count}期` }}</text>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item swiper-item-right">
								<view class="else"><text>暂无相关内容</text></view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</scroll-view>
		</view>
		<u-popup v-model="showPopup" mode="center" border-radius="18" :closeable="true" close-icon-color="#f1f1f1">
			<view class="popup">
				<view class="popup-content">
					<view class="popup-top">
						<text>{{ info.title }}</text>
					</view>
					<scroll-view class="p-sc" scroll-y>
						<text class="content">{{ info.content }}</text>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			bannerList: [],
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '到底了'
			},
			tabsList: [
				{
					name: '话题'
				},
				{
					name: '频道'
				},
				{
					name: '小视频'
				}
			],
			tabList: [
				{
					name: '频道'
				},
				{
					name: '小视频'
				}
			],
			secondTabsList: [],
			swiperCurrent: 0, // 当前标签页
			current: 0, // 当前标签
			secondCurrent: 0,
			currentPage: 1,
			videoList: [], // 话题列表
			channelList: [], // 频道列表
			status: 'loadmore',
			listHeight: 0,
			contentHeight: 0,
			swiperHeight: 0, // 动态赋值swiper高度
			enable: true, // 解决切换tab页出现bottom未定义的错误
			showPopup: false,
			id: '', // 话题分类ID
			info: {}, // 公众号介绍
			count: 0,
			is_sign: false,
			hasStatus: true
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		this.$baseRequest('/api/common/htStatus').then(res => {
			this.hasStatus = res.data.status == 1 ? true : false;
		});
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		let state = uni.getStorageSync('login_state');
		this.is_sign = state && state ? true : false;
		this.onPageInit();
		this.getLiveList();
		this.getChannelList();
	},
	onShow() {
		this.enable = true;
		this.onPageInit();
		this.getLiveList();
		this.getChannelList();
	},
	onHide() {
		this.enable = false;
	},
	methods: {
		onPageInit() {
			// 获取banner
			this.$baseRequest('/api/ad/getList').then(res => {
				this.bannerList = res.data;
			});
			this.$baseRequest('/api/Common/about').then(res => {
				this.info = res.data;
			});
			/* 微赞云API */
			// 获取话题分类
			this.$u.post('/topic/get_classfiy').then(res => {
				let dataobj = res.dataobj;
				this.secondTabsList = dataobj.map(item => {
					return {
						id: item.id,
						name: item.type_name
					};
				});
				this.secondTabsList.unshift({
					name: '全部'
				});
			});
		},
		handleBanner(index) {
			uni.navigateTo({
				url: `../shop/detail/detail?id=${this.bannerList[index].goods_id}`
			});
		},
		getLiveList() {
			uni.showLoading({
				title: '加载中...'
			});
			this.status = 'loading';
			let params = {
				page: this.currentPage
			};
			if (this.id !== '') {
				params.classfiy_id = this.id;
			}
			// 获取话题列表
			this.$u.post('/topic/get_list', params).then(res => {
				uni.hideLoading();
				if (res.dataobj.length < 15) {
					this.status = 'nomore';
				} else {
					res.dataobj.forEach(item => {
						this.videoList.push(item);
					});
					this.status = 'loadmore';
					this.$nextTick(() => {
						this.getSwiperHeight('.swiper-item-left');
					});
				}
			});
		},
		getChannelList() {
			this.$u.post('/channel/get_list').then(res => {
				this.channelList = res.dataobj;
				this.channelList.forEach(item => {
					if (typeof item.count == 'undefined') {
						this.$u
							.post('/channel/get_channel_topic_list', {
								cid: item.cid
							})
							.then(res => {
								let count = res.dataobj.length;
								this.$set(item, 'count', count);
							});
					}
				});
			});
		},
		getLoadMore() {
			if (this.status !== 'nomore') {
				this.currentPage++;
				this.getLiveList();
			}
		},
		getSwiperHeight(el) {
			let info = uni.createSelectorQuery().select(el);
			info
				.boundingClientRect(res => {
					this.contentHeight = res.height;
					this.swiperHeight = this.contentHeight;
				})
				.exec();
		},
		handleNavigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		handleToLive(item) {
			if (item.status !== 1) {
				// 直播未开始或者已结束, 进入直播详情页
				uni.navigateTo({
					url: `./details/details?id=${item.id}&pv=${item.pv}`
				});
			} else {
				// 正在直播
				this.$u
					.post('/topic/get_info', {
						id: item.id
					})
					.then(res => {
						let obj = res.dataobj;
						uni.setStorageSync('live', obj);
						setTimeout(() => {
							uni.navigateTo({
								url: './live/live'
							});
						}, 50);
					});
			}
			// 如已登录, 添加浏览记录
			if (this.is_sign) {
				this.$tkRequest(
					'/api/User/addBrowseLog',
					{
						live_id: item.id,
						content: JSON.stringify(item)
					},
					'POST'
				);
			}
		},
		handleChannelDetail(cid) {
			uni.navigateTo({
				url: `./channel/channel?cid=${cid}`
			});
		},
		tabsChange(index) {
			this.swiperCurrent = index;
			if (index == 0) {
				this.getSwiperHeight('.swiper-item-left');
			} else if (index == 1) {
				this.getSwiperHeight('.swiper-item-center');
			} else {
				this.getSwiperHeight('.swiper-item-right');
			}
		},
		secondTabsChange(index) {
			uni.showLoading({
				title: '加载中...'
			});
			this.currentPage = 1;
			this.secondCurrent = index;
			if (index > 0) {
				this.id = this.secondTabsList[index].id;
				this.videoList.length = 0;
				this.status = 'loading';
				// 获取话题列表
				this.$u
					.post('/topic/get_list', {
						classfiy_id: this.id,
						page: this.currentPage
					})
					.then(res => {
						uni.hideLoading();
						if (res.dataobj.length < 15) {
							this.status = 'nomore';
						} else {
							res.dataobj.forEach(item => {
								this.videoList.push(item);
							});
							this.status = 'loadmore';
						}
						this.$nextTick(() => {
							this.getSwiperHeight('.swiper-item-left');
						});
					});
			} else {
				this.id = '';
				this.getLiveList();
			}
		},
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	},
	watch: {
		// #ifdef MP-WEIXIN
		showPopup: function() {
			if (this.showPopup) {
				uni.hideTabBar({
					animation: true
				});
			} else {
				uni.showTabBar({
					animation: true
				});
			}
		}
		// #endif
	}
};
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;

	scroll-view {
		max-height: 100vh;
	}

	.popup {
		width: 80vw;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-image: url();
		background-size: cover;
		background-repeat: no-repeat;
		color: #f1f1f1;

		.popup-top {
			padding: $uni-spacing-col-lg 0;
			font-size: 12pt;
			text-align: center;
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			font-size: 11pt;
			line-height: 1.5;

			.popup-title {
				font-size: 11pt;
			}

			.p-sc {
				max-height: 45vh;
				margin: $uni-spacing-col-base 0;
			}

			.content {
				padding: $uni-spacing-col-base 0;
				color: #eee;
			}
		}

		.popup-sub {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-base 0;

			text {
				padding-left: $uni-spacing-row-lg;
			}
		}
	}

	.main {
		.search {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			background-image: linear-gradient(90deg, rgb(27, 52, 92), rgb(49, 84, 142));
			color: #f1f1f1;

			.input {
				flex: 1;
			}

			.clock,
			.web {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-left: 25rpx;
				font-size: 8pt;
				/* #ifdef APP-PLUS */
				font-size: 12pt;
				/* #endif */

				text {
					padding-top: 8rpx;
				}
			}
		}

		swiper {
			// 频道
			.swiper-item-center {
				padding: $uni-spacing-col-base 0;
				.channel {
					display: flex;
					align-items: center;
					padding: $uni-spacing-col-lg $uni-spacing-row-lg;
					margin-top: $uni-spacing-col-sm;
					background-color: #fff;

					.channel-right {
						padding: $uni-spacing-col-lg 0 $uni-spacing-col-lg $uni-spacing-row-sm;
						height: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;

						.more {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 1rem;
						}
					}
				}
			}

			// 话题
			.else {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12pt;
				padding: 18vh 0;
				color: #999;
			}

			.list {
				padding: $uni-spacing-col-base $uni-spacing-row-lg;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: $uni-spacing-col-lg;

				.item {
					position: relative;
					width: 49%;
					display: flex;
					flex-direction: column;
					background-color: #fff;
					margin: 12rpx 0;
					border-radius: 10rpx;
					box-shadow: 0 5rpx 10rpx #eee;
					overflow: hidden;

					.item-status {
						padding: 7rpx 15rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						color: #f1f1f1;
						font-size: 8pt;
						border-bottom-right-radius: 10rpx;
					}

					.status-notice {
						background-color: #587bb9;
					}

					.status-live {
						background-color: #2f4b7a;
					}

					.status-replay {
						background-color: #b68538;
					}

					.item-info {
						padding: $uni-spacing-col-sm $uni-spacing-row-sm;
						display: flex;
						flex-direction: column;

						.item-title {
							font-size: 12pt;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-weight: bold;
							padding: $uni-spacing-col-sm 0;
						}

						.item-time {
							padding: $uni-spacing-col-base 0;
							color: #999;
						}

						.item-pv {
							padding: $uni-spacing-col-sm;
							display: flex;
							align-items: center;
							flex-grow: 15rpx;

							text {
								padding-left: 15rpx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
